<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <!-- 1.使用 <audio> 和 <video> 元素
任务：创建一个网页，使用 <audio> 元素嵌入一个音乐文件，并允许用户控制播放、暂停和音量调节。 任务：使用 <video> 元素嵌入一个视频文件，并添加全屏播放功能。 -->
    <video controls>
        <source src="./G.E.M.邓紫棋 - 倒数.mp4">
    </video>
    <hr>
    <audio controls>
        <source src="./G.E.M.邓紫棋 - 倒数.mp4">
    </audio>
    <hr>
    <!-- 2. 使用 `<canvas>` 元素
        -  `<canvas>` 元素：用于在网页上绘制图形，如图表和其他图像。它是一个绘图API，通常需要JavaScript来实现动态效果。 -->
            <canvas width="300px" height="400px" style="border: 2px solid color(srgb red green blue);">
            </canvas>
    <!-- 3. 使用 `<details>` 和 `<summary>` 元素
         -  `<details>` 和 `<summary>` 元素：`<details>` 元素用于创建一个可以折叠和展开的容器，
             - `<summary>` 元素定义了折叠内容的标题。用户点击标题时，可以展开或折叠详细信息。
    ```html -->
    <hr>
    <details>
        <summary>如何重置我的密码？</summary>
        <p>请访问我们的密码重置页面，并按照指示操作。</p>
    </details>
    <details>
        <summary>如何更新我的个人信息？</summary>
        <p>登录您的账户，然后进入设置页面更新您的个人信息。</p>
    </details>
    <hr>
    <!-- 4. 使用 `<datalist>` 元素
        - `<datalist>` 元素：与 `<input>` 元素一起使用，提供一组预定义的选项，用户可以从中选择，也可以输入自己的值。它用于自动完成功能。 -->
    <form>
        <label for="=city">请选择城市</label>
        <input list="cities" id="city" name="city">
        <datalist id="cities">
            <option value="江西"></option>
            <option value="福建"></option>
            <option value="厦门"></option>
            <option value="湖南"></option>
        </datalist>
    </form>
    <hr
    <!-- 5. 使用 `<figure>` 和 `<figcaption>` 元素
            - `<figure>` 和 `<figcaption>` 元素：`<figure>` 用于包含一些独立的流内容，如图像、图表、照片、代码等。
            - `<figcaption>` 为 `<figure>` 元素提供标题或说明。 -->      
    <figure>
        <img src="./微信图片_20240607163151.jpg" alt="超绝美图">
    </figure>
    <!-- 6. 使用 `<picture>` 元素
        - `<picture>` 元素：用于为不同屏幕尺寸或设备提供不同大小的图片。它允许你定义多个 `<source>` 元素，每个元素可以指定不同的图片源和条件，浏览器会选择最适合当前环境的图片。
        - media 属性定义了两个不同的条件： -->
        <picture>
            <source media="(min-width:200px)" srcset="large.jpg">
            <source media="(min-width:200px)" srcset="media.jpg">
            <img src="./微信图片_20240607163200.jpg" alt="">
        </picture>
    
</body>
</html>